<template>
  <view class="container" ref="page">
    <!-- 状态栏占位 -->
    <view class="status-bar-spacer" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部操作区 -->
    <view class="header">
      <view class="tabs-container">
        <view 
          class="tab" 
          :class="{ active: activeTab === 'normal' }" 
          @click="switchTab('normal')"
          ref="normalTab"
        >
          <text class="tab-text">普通角色</text>
          <view class="tab-indicator" v-if="activeTab === 'normal'"></view>
        </view>
        <view
          v-if="showAdultTabs"
          class="tab" 
          :class="{ active: activeTab === 'adult' }" 
          @click="switchTab('adult')"
          ref="adultTab"
        >
          <text class="tab-text">高级角色</text>
          <view class="tab-indicator" v-if="activeTab === 'adult'"></view>
        </view>
      </view>
      <view class="add-button" :class="{ 'rotate': showCreateModal }" @click="toggleCreateModal">
        <my-icon name="add" size="48rpx" color="#ffffff" />
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 普通角色区域 -->
      <view class="section" v-if="activeTab === 'normal' || !showAdultContent">
        <!-- 普通角色列表 -->
        <view class="list-header">
          <text class="list-title">普通角色</text>
          <text class="list-count">{{ normalRoles.length }}</text>
        </view>
        <view 
          class="role-card" 
          v-for="role in normalRoles" 
          :key="role.id" 
          @click="selectRole(role)"
        >
          <image class="avatar" :src="role.avatar" mode="aspectFill"></image>
          <view class="role-info">
            <text class="role-name">{{ role.name }}</text>
            <text class="role-message">{{ role.description || '[系统消息]霜月给您发送了新的星念！ 点击开启吧～' }}</text>
          </view>
          <view v-if="role.isCustom" class="edit-button" @touchend.prevent.stop="editRole(role)">
            <my-icon name="edit" size="44rpx" color="rgba(255, 255, 255, 0.6)" />
          </view>
          <view v-else class="message-time">18:31</view>
        </view>
      </view>
      
      <!-- 高级角色区域 -->
      <view class="section" v-if="activeTab === 'adult' && showAdultContent">
        <!-- 群聊列表 -->
        <view class="list-header">
          <text class="list-title">群聊列表</text>
          <text class="list-count">{{ groupChats.length }}</text>
        </view>
        <view 
          class="role-card" 
          v-for="groupChat in groupChats" 
          :key="groupChat.id" 
          @click="enterGroupChat(groupChat)"
        >
          <image class="avatar" src="/static/avatars/default.png" mode="aspectFill"></image>
          <view class="role-info">
            <text class="role-name">{{ groupChat.name }}</text>
            <text class="role-message">{{ formatGroupChatDate(groupChat.createTime) }}</text>
          </view>
          <view class="edit-button" @touchend.prevent.stop="deleteGroupChat(groupChat)">
            <my-icon name="delete" size="44rpx" color="rgba(255, 255, 255, 0.6)" />
          </view>
        </view>
        
        <!-- 高级角色列表 -->
        <view class="list-header">
          <text class="list-title">高级角色</text>
          <text class="list-count">{{ adultRoles.length }}</text>
        </view>
        <view 
          class="role-card" 
          v-for="role in adultRoles" 
          :key="role.id" 
          @click="selectRole(role)"
        >
          <image class="avatar" :src="role.avatar" mode="aspectFill"></image>
          <view class="role-info">
            <text class="role-name">{{ role.name }}</text>
            <text class="role-message">{{ role.description }}</text>
          </view>
          <view v-if="role.isCustom" class="edit-button" @touchend.prevent.stop="editRole(role)">
            <my-icon name="edit" size="44rpx" color="rgba(255, 255, 255, 0.6)" />
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 创建模态框 -->
    <view class="modal-overlay" :class="{ 'show': showCreateModal }" v-if="showCreateModal" @click="toggleCreateModal">
      <view class="modal-content" :class="{ 'show': showCreateModal }" @click.stop>
        <view class="modal-body">
          <!-- 普通角色创建按钮 -->
          <view class="create-option" @click="createRoleAndClose">
            <view class="create-icon">
              <my-icon name="user" size="48rpx" color="#ffffff" />
            </view>
            <view class="create-option-info">
              <view class="create-option-title">新建角色</view>
              <view class="create-option-desc">创建一个新的AI角色</view>
            </view>
          </view>
          
          <!-- 高级角色创建按钮 -->
          <view class="create-option" v-if="showAdultContent" @click="createAdultRoleAndClose">
            <view class="create-icon">
              <my-icon name="user-plus" size="48rpx" color="#ffffff" />
            </view>
            <view class="create-option-info">
              <view class="create-option-title">新建高级角色</view>
              <view class="create-option-desc">创建专属于高级内容的AI角色</view>
            </view>
            <view class="info-icon" @click.stop="showAdultRoleInfo">
              <my-icon name="info" size="36rpx" color="rgba(255, 255, 255, 0.6)" />
            </view>
          </view>
          
          <!-- 群聊创建按钮 -->
          <view class="create-option" v-if="showAdultContent" @click="startGroupChatAndClose">
            <view class="create-icon">
              <my-icon name="chat" size="48rpx" color="#ffffff" />
            </view>
            <view class="create-option-info">
              <view class="create-option-title">新建群聊</view>
              <view class="create-option-desc">创建多角色互动对话</view>
            </view>
            <view class="info-icon" @click.stop="showGroupChatInfo">
              <my-icon name="info" size="36rpx" color="rgba(255, 255, 255, 0.6)" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import settingsManager from '@/store/settings.js'
import roleManager from '@/store/role.js'
import groupChatManager from '@/store/group-chat.js'

export default {

  data() {
    return {
      statusBarHeight: 0,
      normalRoles: [],
      adultRoles: [],
      activeTab: 'normal',
      settingsManager,
      // 添加本地状态，用于控制UI显示
      showAdultTabs: false,
      showAdultContent: false,
      // 群聊列表
      groupChats: [],
      // 模态框控制
      showCreateModal: false,
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: res => {
        this.statusBarHeight = res.statusBarHeight
      }
    })
    
    // 初始化本地状态
    this.updateLocalSettings()
    
    this.loadRoles()
    
    // 监听设置变更事件
    uni.$on('settings-changed', this.handleSettingsChange)
    
    // 监听通用设置更新事件
    uni.$on('settings-updated', this.handleSettingsUpdated)
    
    // 监听角色更新事件
    uni.$on('role-updated', this.handleRoleUpdated)
    
    // 监听群聊更新事件
    uni.$on('group-chat-updated', this.handleGroupChatUpdated)
  },
  onUnload() {
    // 移除事件监听
    uni.$off('settings-changed', this.handleSettingsChange)
    uni.$off('settings-updated', this.handleSettingsUpdated)
    uni.$off('role-updated', this.handleRoleUpdated)
    uni.$off('group-chat-updated', this.handleGroupChatUpdated)
  },
  onShow() {
    // 每次显示页面时更新本地设置状态和重新加载角色列表
    this.updateLocalSettings()
    
    // 刷新线上角色
    this.refreshOnlineRoles()
    
    // 加载群聊列表
    this.loadGroupChats()
    
    // 刷新线上群聊
    this.refreshOnlineGroups()
  },
  methods: {
    // 刷新线上角色
    async refreshOnlineRoles() {
      try {
        // 清理无效的线上角色
        await roleManager.cleanInvalidOnlineRoles()
        
        // 重新加载角色列表
        await this.loadRoles()
     
      } catch (error) {
        console.error('[首页] 刷新线上角色异常:', error)
        
        
        // 显示错误提示
        uni.showToast({
          title: '刷新角色失败',
          icon: 'none'
        })
      }
    },
    
    // 刷新线上群聊
    async refreshOnlineGroups() {
      try {
        // 重置群聊管理器的初始化标志，强制重新拉取线上群聊
        groupChatManager.hasInitializedOnlineGroups = false
        
        // 重新加载群聊列表
        await this.loadGroupChats()
        
        console.log('[首页] 刷新线上群聊成功')
      } catch (error) {
        console.error('[首页] 刷新线上群聊异常:', error)
        
        // 显示错误提示
        uni.showToast({
          title: '刷新群聊失败',
          icon: 'none'
        })
      }
    },
    
    // 导航到设置页面
    navigateToSettings() {
      uni.switchTab({
        url: '/pages/settings/settings'
      })
    },
    
    // 更新本地设置状态
    updateLocalSettings() {
      // 从设置管理器获取最新状态
      this.showAdultTabs = settingsManager.adultSettingUnlocked
      this.showAdultContent = settingsManager.showAdultContent
      
      // 如果不显示高级内容，确保标签页在普通标签
      if (!this.showAdultContent) {
        this.activeTab = 'normal'
      }
    },
    
    // 处理设置变更事件
    handleSettingsChange(data) {
      console.log('设置变更:', data)
      
      // 更新本地设置状态
      if (data.showAdultContent !== undefined) {
        this.showAdultContent = data.showAdultContent
        
        // 如果关闭了高级内容显示，切换到普通标签
        if (!data.showAdultContent) {
          this.activeTab = 'normal'
        }
      }
    },
    
    // 处理通用设置更新事件
    handleSettingsUpdated(data) {
      console.log('通用设置更新:', data)
      
      // 更新本地设置状态
      this.updateLocalSettings()
      
      // 重新加载角色列表
      this.loadRoles()
    },
    
    // 加载角色列表
    async loadRoles() {
      try {
        console.log('[首页] 开始加载角色列表...')
        
        // 使用角色管理器获取所有角色
        const result = await roleManager.getAllRoles();
        
        if (result.errCode === 0) {
          const roles = result.data || [];
          
          // 分类角色
          this.normalRoles = roles.filter(role => !role.isAdult);
          this.adultRoles = roles.filter(role => role.isAdult);
          
          console.log('[首页] 加载角色列表成功 - 普通角色:', this.normalRoles.length, '高级角色:', this.adultRoles.length);
          
          // 检查是否有线上角色
          const onlineRoles = roles.filter(role => role.isOnline);
          console.log('[首页] 线上角色数量:', onlineRoles.length);
        } else {
          console.error('[首页] 加载角色列表失败:', result.errMsg);
          
          // 尝试使用同步方法获取本地角色
          this.loadLocalRolesFallback();
        }
      } catch (error) {
        console.error('[首页] 加载角色列表异常:', error);
        
        // 尝试使用同步方法获取本地角色
        this.loadLocalRolesFallback();
      }
    },
    
    // 加载本地角色（作为备用方案）
    loadLocalRolesFallback() {
      try {
        console.log('[首页] 尝试从本地加载角色列表...')
        
        // 使用同步方法获取所有角色
        const roles = roleManager.getAllRolesSync();
        
        // 分类角色
        this.normalRoles = roles.filter(role => !role.isAdult);
        this.adultRoles = roles.filter(role => role.isAdult);
        
        console.log('[首页] 从本地加载角色列表成功 - 普通角色:', this.normalRoles.length, '高级角色:', this.adultRoles.length);
      } catch (fallbackError) {
        console.error('[首页] 从本地加载角色列表也失败:', fallbackError);
        
        // 清空角色列表
        this.normalRoles = [];
        this.adultRoles = [];
        
        // 显示错误提示
        uni.showToast({
          title: '加载角色失败',
          icon: 'none'
        });
      }
    },
    
    // 创建新角色
    createRole() {
      uni.navigateTo({
        url: '/pages/role/edit'
      })
    },
    
    // 编辑角色
    editRole(role) {
      // 根据角色类型跳转到不同的编辑页面
      const editPath = role.isAdult ? '/pages/role/adult-edit' : '/pages/role/edit'
      uni.navigateTo({
        url: `${editPath}?id=${role.id}`
      })
    },
    
    // 开始聊天
    selectRole(role) {
      uni.navigateTo({
        url: `/pages/chat/chat?id=${role.id}`
      })
    },
    
    // 删除角色
    async deleteRole(role) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除角色"${role.name}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              // 使用角色管理器删除角色
              const result = await roleManager.deleteRole(role.id);
              
              if (result.errCode === 0) {
                // 重新加载角色列表
                this.loadRoles();
                
                // 提示删除成功
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
              } else {
                console.error('[首页] 删除角色失败:', result.errMsg);
                uni.showToast({
                  title: '删除失败',
                  icon: 'none'
                });
              }
            } catch (error) {
              console.error('[首页] 删除角色异常:', error);
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 处理角色更新事件
    handleRoleUpdated() {
      // 重新加载角色列表
      this.loadRoles();
    },

    createAdultRole() {
      // 检查是否解锁了高级设置
      if (!settingsManager.adultSettingUnlocked) {
        uni.showToast({
          title: '此功能需要特殊解锁',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 检查是否启用了高级内容显示
      if (!settingsManager.showAdultContent) {
        uni.showModal({
          title: '提示',
          content: '您需要先在设置中开启"显示高级角色"选项才能创建高级角色。',
          confirmText: '去设置',
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({
                url: '/pages/settings/settings'
              });
            }
          }
        });
        return;
      }
      
      // 导航到高级角色编辑页面
      uni.navigateTo({
        url: '/pages/role/adult-edit'
      });
    },
    // 加载群聊列表
    async loadGroupChats() {
      try {
        // 使用群聊管理模块获取群聊列表
        const result = await groupChatManager.getAllGroups();
        
        if (result.errCode === 0) {
          // 使用新数组替换，确保触发Vue的响应式更新
          this.groupChats = [...(result.data || [])];
          console.log('[群聊] 已加载群聊列表，数量:', this.groupChats.length);
          
          // 检查是否有线上群聊
          const onlineGroups = this.groupChats.filter(group => group.isOnline);
          console.log('[群聊] 线上群聊数量:', onlineGroups.length);
          
          // 添加一个延时的强制刷新，确保界面正确渲染
          this.$nextTick(() => {
            if (this.$forceUpdate) {
              this.$forceUpdate();
            }
          });
        } else {
          console.error('[群聊] 加载群聊列表失败:', result.errMsg);
          
          // 尝试使用同步方法获取本地群聊
          this.loadLocalGroupChatsFallback();
        }
      } catch (e) {
        console.error('[群聊] 加载群聊列表失败:', e);
        
        // 尝试使用同步方法获取本地群聊
        this.loadLocalGroupChatsFallback();
      }
    },
    
    // 加载本地群聊（作为备用方案）
    loadLocalGroupChatsFallback() {
      try {
        console.log('[群聊] 尝试从本地加载群聊列表...');
        
        // 使用同步方法获取群聊列表，并使用新数组
        const localGroups = groupChatManager.getAllGroupsSync();
        this.groupChats = [...localGroups];
        console.log('[群聊] 从本地加载群聊列表成功，数量:', this.groupChats.length);
        
        // 强制刷新界面
        this.$nextTick(() => {
          if (this.$forceUpdate) {
            this.$forceUpdate();
          }
        });
      } catch (fallbackError) {
        console.error('[群聊] 从本地加载群聊列表也失败:', fallbackError);
        
        // 清空群聊列表
        this.groupChats = [];
        
        // 显示错误提示
        uni.showToast({
          title: '加载群聊失败',
          icon: 'none'
        });
      }
    },
    
    // 开始群聊
    async startGroupChat() {
      // 获取所有高级角色
      const adultRoles = this.adultRoles;
      
      if (adultRoles.length < 1) {
        uni.showToast({
          title: '至少需要1个高级角色才能开始群聊',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 显示确认对话框，提供更多信息
      uni.showModal({
        title: '创建群聊',
        content: '群聊将使用默认角色进行创建。您可以在群聊中随时添加或移除角色。\n\n注意：群聊中的角色会轮流回复您的消息。',
        confirmText: '创建',
        cancelText: '取消',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 显示加载提示
              uni.showLoading({
                title: '创建中...',
                mask: true
              });
              
              // 使用群聊管理模块创建群聊（使用默认角色）
              const groupChat = await groupChatManager.createGroupChat();
              
              // 更新本地群聊列表
              await this.loadGroupChats();
              
              // 隐藏加载提示
              uni.hideLoading();
              
              // 显示创建成功提示
              uni.showToast({
                title: '群聊创建成功',
                icon: 'success',
                duration: 1500
              });
            } catch (error) {
              // 隐藏加载提示
              uni.hideLoading();
              
              console.error('[群聊] 创建群聊失败:', error);
              
              // 显示错误提示
              uni.showToast({
                title: '创建失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 进入群聊
    async enterGroupChat(groupChat) {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载中...',
          mask: true
        });
        
        // 如果是线上群聊，先获取最新数据
        if (groupChat.isOnline) {
          const updatedGroup = await groupChatManager.getGroupById(groupChat.id);
          if (!updatedGroup) {
            uni.showToast({
              title: '群聊不存在或已被删除',
              icon: 'none'
            });
            uni.hideLoading();
            return;
          }
        }
        
        // 隐藏加载提示
        uni.hideLoading();
        
        // 跳转到群聊页面
        uni.navigateTo({
          url: `/pages/chat/group-chat?groupId=${groupChat.id}`
        });
      } catch (error) {
        // 隐藏加载提示
        uni.hideLoading();
        
        console.error('[群聊] 进入群聊失败:', error);
        
        // 降级处理：直接进入群聊
        uni.navigateTo({
          url: `/pages/chat/group-chat?groupId=${groupChat.id}`
        });
      }
    },
    
    // 删除群聊
    async deleteGroupChat(groupChat) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除"${groupChat.name}"吗？`,
        success: async res => {
          if (res.confirm) {
            try {
              // 显示加载提示
              uni.showLoading({
                title: '删除中...',
                mask: true
              });
              
              // 使用群聊管理模块删除群聊
              const result = await groupChatManager.deleteGroupChat(groupChat.id);
              
              // 隐藏加载提示
              uni.hideLoading();
              
              if (result) {
                // 从本地数组中直接移除该群聊（立即更新UI）
                const index = this.groupChats.findIndex(g => g.id === groupChat.id);
                if (index !== -1) {
                  this.groupChats.splice(index, 1);
                }
                
                // 重新加载群聊列表（确保数据最新）
                this.loadGroupChats();
                
                // 触发一个自定义事件，通知其他可能的组件
                uni.$emit('group-chat-updated');
                
                // 提示删除成功
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
              } else {
                uni.showToast({
                  title: '删除失败',
                  icon: 'none'
                });
              }
            } catch (e) {
              // 隐藏加载提示
              uni.hideLoading();
              
              console.error('[群聊] 删除群聊失败:', e);
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 格式化群聊日期
    formatGroupChatDate(timestamp) {
      if (!timestamp) return '';
      
      const date = new Date(timestamp);
      const now = new Date();
      
      // 如果是今天，显示时间
      if (date.toDateString() === now.toDateString()) {
        return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }
      
      // 如果是昨天，显示"昨天"
      const yesterday = new Date(now);
      yesterday.setDate(now.getDate() - 1);
      if (date.toDateString() === yesterday.toDateString()) {
        return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }
      
      // 其他情况显示日期
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    },

    // 显示高级角色信息
    showAdultRoleInfo(e) {
      // 阻止事件冒泡
      e.stopPropagation();
      
      uni.showModal({
        title: '高级角色',
        content: '创建专属于高级内容的AI角色，可以进行更加开放的对话。高级角色可以参与群聊，与其他角色互动。',
        showCancel: false,
        confirmText: '了解'
      });
    },
    
    // 显示群聊信息
    showGroupChatInfo(e) {
      // 阻止事件冒泡
      e.stopPropagation();
      
      uni.showModal({
        title: '群聊功能',
        content: '创建多角色互动对话，让多个AI角色同时参与对话。您可以在群聊中随时添加或移除角色，角色会轮流回复您的消息。',
        showCancel: false,
        confirmText: '了解'
      });
    },

    // 处理群聊更新事件
    handleGroupChatUpdated() {
      console.log('[群聊] 接收到群聊更新事件');
      // 重新加载群聊列表
      this.loadGroupChats();
      
      // 如果需要，可以在这里添加其他UI刷新逻辑
      // 延迟执行一次强制刷新
      setTimeout(() => {
        if (this.$forceUpdate) {
          this.$forceUpdate();
        }
      }, 100);
    },

    toggleCreateModal() {
      this.showCreateModal = !this.showCreateModal;
    },

    createRoleAndClose() {
      this.createRole();
      this.toggleCreateModal();
    },

    createAdultRoleAndClose() {
      this.createAdultRole();
      this.toggleCreateModal();
    },

    startGroupChatAndClose() {
      this.startGroupChat();
      this.toggleCreateModal();
    },

    switchTab(tab) {
      this.activeTab = tab;
    }
  },
  mounted() {
    // 初始化页面
  },
  watch: {
    // 监听相关状态变化
    groupChats: {
      handler(newVal) {
        console.log('[群聊] 群聊列表已更新，数量:', newVal.length);
        // 数据变化时可以在这里添加特定的UI更新逻辑
      },
      deep: true
    }
  }
}
</script>

<style>
/* 主容器 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #121212;
  color: #ffffff;
}

/* 状态栏占位 */
.status-bar-spacer {
  width: 100%;
}

/* 顶部操作区 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 32rpx;
}

/* 选项卡 */
.tabs-container {
  display: flex;
  position: relative;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;
  padding: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.tab {
  position: relative;
  padding: 20rpx 32rpx;
  flex: 1;
  text-align: center;
  border-radius: 8rpx;
  transition: all 0.3s ease;
  z-index: 1;
}

.tab.active {
  background-color: rgba(255, 255, 255, 0.1);
}

.tab-text {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.tab.active .tab-text {
  color: #ffffff;
  font-weight: 500;
}

.tab-indicator {
  position: absolute;
  bottom: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: linear-gradient(90deg, #3a86ff, #8338ec);
  border-radius: 6rpx;
}

/* 添加按钮 */
.add-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #3a86ff, #8338ec);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(58, 134, 255, 0.3);
  margin-left: 24rpx;
}

.add-button.rotate {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #ff006e, #fb5607);
  box-shadow: 0 4rpx 12rpx rgba(255, 0, 110, 0.3);
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 0 32rpx;
  margin-top: 20rpx;
}

.section {
  display: flex;
  flex-direction: column;
}

/* 角色卡片 */
.role-card {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  position: relative;
}

.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.role-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 确保内容可以被压缩 */
  overflow: hidden;
}

.role-name {
  font-size: 34rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-message {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.role-description {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.message-time {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 20rpx;
  flex-shrink: 0;
}

/* 列表标题 */
.list-header {
  display: flex;
  align-items: center;
  padding: 20rpx 0 10rpx;
  margin-top: 10rpx;
}

.list-title {
  font-size: 30rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.list-count {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
  padding: 2rpx 12rpx;
  border-radius: 12rpx;
  margin-left: 10rpx;
}

/* 编辑按钮 */
.edit-button {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 999;
  transition: background-color 0.3s ease;
  padding-top: calc(100rpx + var(--status-bar-height));
  padding-right: 32rpx;
}

.modal-overlay.show {
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  width: 70%;
  max-width: 500rpx;
  background-color: #1e1e1e;
  border-radius: 20rpx;
  overflow: hidden;
  transform-origin: 90% 0%;
  transform: scale(0);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
}

.modal-content.show {
  transform: scale(1);
  opacity: 1;
}

.modal-body {
  padding: 20rpx;
}

.create-option {
  display: flex;
  align-items: center;
  padding: 16rpx;
  margin-bottom: 16rpx;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 16rpx;
  position: relative;
  transition: background-color 0.2s ease;
}

.create-option:last-child {
  margin-bottom: 0;
}

.create-option:active {
  background-color: rgba(255, 255, 255, 0.12);
}

.create-option-info {
  flex: 1;
  margin-left: 16rpx;
}

.create-option-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 4rpx;
}

.create-option-desc {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.5);
}

.create-icon {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
  background-color: rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
}
</style>
